import { type FC, Children } from 'react';
import { View, ViewStyle, StyleSheet } from 'react-native';
import type { SpaceProps } from './types';
import styles from './styles';

const Space: FC<SpaceProps> = (props) => {
  const {
    style,
    size = 16,
    children,
    direction = 'horizontal'
  } = props;

  const wrapperStyle = styles[direction];
  const childs = Children.toArray(children).filter(v => v);

  return (
    <View style={StyleSheet.flatten([wrapperStyle, style])}>
      {childs.map((child, i) => {
        const last = i === childs.length - 1;
        let _styles: ViewStyle = {
          marginRight: last ? 0 : size
        }
        if (direction === 'vertical') {
          _styles = {
            marginBottom: last ? 0 : size
          }
        }
        return (
          <View key={i} style={_styles}>
            {child}
          </View>
        );
      })}
    </View>
  );
}

export default Space;